<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>行高的继承</title>
    <style>
      body {
        color: pink;
        /* font: 12px/24px 'Microsoft YaHei'; */
        /* 行高可以跟单位，也可以不跟单位 */
        font: 12px/1.5 "Microsoft YaHei";
      }
      div {
        /* 子元素继承了父元素 body 的行高 1.5 */
        /* 这个1.5就是当前元素文字大小 font-size 的1.5倍，所以当前<div>的文字行高就是21像素 */
        font-size: 14px;
      }
      p {
        /* 1.5 * 16 =  24 当前的行高 */
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <!--
            <li>标签没有手动指定文字大小，则会继承父亲的文字大小body的12px，所以<li>的文字大小为12px
            当前<li>的行高就是 12 * 1.5 = 18
        -->
      <li>我没有指定文字大小</li>
    </ul>
  </body>
</html>
